<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
    <script src="js/echarts.min.js"></script>
</head>
<style>
    #canvas{
        width: 500px;
        height: 500px;
        /* border: 1px solid red; */
    }
</style>
<body>
    <div id="app">
        <div id="canvas"></div>
    </div>
    <script>
        var app = Vue.createApp({
            data(){
                return {
                    msg:'hello world'
                }
            },
            mounted(){
                this.init()
            },
            methods:{
                init(){
                    var myChart = echarts.init(document.getElementById('canvas'))
                    myChart.setOption({
                        title: {
                            text: '一周课时分布数据',
                            left: 'center'
                        },
                        legend: {
                            data: ['张三', '李四'],
                            left: 'center',
                            top: 'bottom'
                        },
                        xAxis: {
                            type: 'category',
                            data: ['周一', '周二', '周三', '周四', '周五'],
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: '#4E6EF2'
                                }
                            },
                            axisTick: {
                                show: true,
                                lineStyle: {
                                    color: '#0f0'
                                }
                            },
                            axisLabel: {
                                show: true,
                                color: '#000'
                            },
                            splitLine:{
                                show: true,
                                lineStyle: {
                                    color: '#999',
                                    type: 'dashed'
                                }
                            }
                        },
                        yAxis: {
                            type: 'value',
                            name: '课时(节)',
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: '#4E6EF2'
                                }
                            },
                            axisTick: {
                                show: true,
                                lineStyle: {
                                    color: '#0f0'
                                }
                            },
                            axisLabel: {
                                show: true,
                                color: '#000'
                            },
                            splitLine:{
                                lineStyle: {
                                    color: '#999',
                                    type: 'dashed'
                                }
                            }
                        },
                        series: [
                            {   
                                name: '张三',
                                data: [4, 2, 4, 8, 4],
                                type: 'line',
                                lineStyle: {
                                    color: '#a2c'
                                }
                            },
                            {   
                                name: '李四',
                                data: [2, 6, 8, 4, 6],
                                type: 'line',
                                lineStyle: {
                                    color: '#b20'
                                }
                            }
                        ]
                    })
                }
            }
        }).mount('#app')
    </script>
</body>
</html>